<template>
  <el-form
    :model="addEditForm"
    ref="addEditForm"
    label-width="105px"
    label-position="left"
    class="pg-shaohuo-person-add-edit-admin-rule">
    <el-dialog
      :title="`${type}权限`"
      :before-close="beforeDialogClose"
      :visible.sync="dialogVisible"
      width="50%">

      <!-- 表单主题
      -------------------------- -->
      <el-form-item 
        label="父级权限"
        prop="pid">
        <el-select
          v-model="addEditForm.pid"
          @visible-change="visibleChange"
          filterable
          :loading="!hasAllRuleList"
          placeholder="可搜索,顶级权限不用选">
          <el-option
            v-for="item in ruleList"
            :key="item.id"
            :label="item.ltitle"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item 
        label="权限名称"
        prop="title"
        :rules="{ required: true, message: '请输入权限名称', trigger: 'blur' }">
        <el-input v-model="addEditForm.title"></el-input>
      </el-form-item>

      <el-form-item 
        label="控制器/方法"
        prop="href"
        :rules="{ required: true, message: '请输入控制器/方法', trigger: 'blur' }">
        <el-input placeholder="例如Sys/sysList"
          v-model="addEditForm.href"></el-input>
      </el-form-item>

      <el-form-item 
        label="菜单状态"
        prop="menustatus">
        <el-switch
          v-model="addEditForm.menustatus"
          active-text="开启"
          inactive-text="关闭"></el-switch>
      </el-form-item>

      <el-form-item 
        label="排序"
        prop="sort"
        :rules="{ required: true, message: '请输入排序值', trigger: 'blur' }">
        <el-input v-model="addEditForm.sort"></el-input>
      </el-form-item>
      
      <!-- 底部按钮区
      -------------------------- -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogClose">取 消</el-button>
        <el-button type="primary"
          @click="submitForm"
          :loading="loadingBtn === '确定'">确 定</el-button>
      </span>
    </el-dialog>
  </el-form>
</template>

<script>
import { SettingPermissionService } from 'services/Api'
import {
  btnLoadingMixin,
  formAddEditMixin,
  dialogCoreMixin
} from 'services/Public'
import { mapState } from 'vuex'

export default {
  mixins: [
    btnLoadingMixin,
    formAddEditMixin,
    dialogCoreMixin
  ],
  data () {
    return {
      addEditForm: {
        pid: '',
        title: '',
        href: '',
        menustatus: true,
        sort: ''
      },
      ruleList: null, // 权限列表
      hasAllRuleList: false // 是否已获取所有权限列表
    }
  },
  computed: {
    ...mapState([ 'acc_id' ]),
    getAllRuleParam () {
      return {
        acc_id: this.acc_id
      }
    },
    // 添加参数
    addParam () {
      return {
        acc_id: this.acc_id,
        pid: this.addEditForm.pid || '0',
        title: this.addEditForm.title,
        href: this.addEditForm.href,
        menustatus: this.addEditForm.menustatus ? '1' : '0',
        sort: this.addEditForm.sort
      }
    },
    // 修改参数
    alterParam () {
      return {
        acc_id: this.acc_id,
        id: this.editData.id,
        pid: this.addEditForm.pid || '0',
        title: this.addEditForm.title,
        href: this.addEditForm.href,
        menustatus: this.addEditForm.menustatus ? '1' : '0',
        sort: this.addEditForm.sort
      }
    }
  },
  methods: {
    // 下拉框出现/隐藏时触发
    visibleChange (boo) {
      // 出现时判断areaList是否已获取，没有则调用接口获取
      if (boo && !this.hasAllRuleList) this.getAllRule()
    },
    // 关闭弹窗前重置表单
    beforeDialogClose (done) {
      if (done) done()
      this.isEditing = false
      this.resetForm()
      this.addEditForm = {
        pid: '',
        title: '',
        href: '',
        menustatus: true,
        sort: ''
      }
    },
    // formAddEditMixin需要 - 编辑时将传入的源数据写入当前表单
    editDataHandler (v) {
      this.addEditForm.pid = v.pid === '0' ? '' : v.pid
      this.addEditForm.title = v.title || ''
      this.addEditForm.href = v.href || ''
      this.addEditForm.menustatus = v.menustatus === '1'
      this.addEditForm.sort = v.sort || ''
      if (!this.hasAllRuleList && v.pid !== '0') {
        this.ruleList = [ { id: v.pid, ltitle: v.pTitle } ]
      }
    },
    // formAddEditMixin需要 - 提交成功后的操作
    afterSubmitSuccess () {
      this.dialogComplete()
    },
    // 添加接口
    currentAddApi () {
      return SettingPermissionService.addRule(this.addParam)
    },
    // 编辑接口
    currentEditApi () {
      return SettingPermissionService.editRule(this.alterParam)
    },
    // 获取所有权限
    async getAllRule () {
      const [ err, res ] = await SettingPermissionService.adminRule(this.getAllRuleParam)
      if (err) return this.$message.error(err.message || '获取失败')
      this.ruleList = res.list
      this.hasAllRuleList = true
    }
  }
}
</script>

<style lang="scss">
@import "src/styles/config/views.scss";

@include b(shaohuo-person-add-edit-admin-rule) {
  .el-form-item__content > .el-input,
  .el-form-item__content > .el-select {
    width: 80%;
  }
  @include e(delete) {
    padding-left: $--padding-base;
  }
  
  .el-switch__label {
    font-weight: normal;
    color: $--color-text-regular;
    &.is-active {
      color: $--color-primary;
    }
  }
}
</style>
